<!-- 头部 展示区 + 操作按钮 + 展开按钮 -->
<div
  lv-internal-select-trigger
  class="lv-treeselect-wrapper"
  [lvDisabled]="lvDisabled"
  [lvLoading]="lvLoading"
  [lvPlaceholder]="lvPlaceholder"
  [value]="multiple ? treeModelValue : treeModelValue?.[0]"
  [lvMode]="lvTreeSelectionMode"
  [lvShowClear]="lvShowClear"
  [lvMaxTagCount]="lvMaxTagCount"
  [lvMaxTagRow]="lvMaxTagRow"
  [lvSize]="lvSize"
  [selectOpen]="animationState.startsWith('show')"
  [customTrigger]="customTrigger ? customTriggerTpl : null"
  (removeChange)="removeSelectedItem($event)"
  (clearChange)="clearSelected($event)"
  (onFoldSelectionChange)="updateOverlayPosition()"
></div>

<!-- 自定义选中样式 -->
<ng-template #customTriggerTpl>
  <ng-content select="lv-treeselect-trigger"></ng-content>
</ng-template>

<!-- overlay -->
<ng-template #treeselectTemplate>
  <div class="lv-treeselect-container" [@showItem]="animationState" (@showItem.done)="onAnimationDone($event)" [ngClass]="lvPanelClass">
    <!-- header -->
    <div class="lv-treeselect-panel-header" (click)="stopPropagation($event)">
      <!-- custom -->
      <ng-content select="lv-treeselect-header"></ng-content>

      <!-- search -->
      <div class="lv-treeselect-panel-search" *ngIf="lvShowFilter">
        <lv-search [lvType]="'inner'" [lvFocus]="lvFilterFocus" (ngModelChange)="treeSearch($event)" [(ngModel)]="value"></lv-search>
      </div>
    </div>

    <!-- tree -->
    <div
      class="lv-treeselect-panel-content"
      [ngClass]="{ notree: noData || !lvTreeData?.length }"
      [class.treeselect-virtualscroll-container]="lvVirtualScroll"
    >
      <lv-tree
        #lvTree
        [lvData]="lvTreeData"
        [lvAsync]="lvTreeAsync"
        [lvCompareWith]="lvTreeCompareWith"
        [lvSelectionMode]="lvTreeSelectionMode"
        lvKeepSelectedInSingle
        [lvShowCheckbox]="lvTreeShowCheckbox"
        [lvSelectedByCheckbox]="lvTreeSelectedByCheckbox"
        [lvShowLine]="lvTreeShowLine"
        [lvShowContentIcon]="lvTreeShowContentIcon"
        [lvShowExpandedIcon]="lvTreeShowExpandedIcon"
        [lvKeepExpanded]="lvKeepExpanded"
        [lvSelectionAssociate]="lvTreeSelectionAssociate"
        [(lvSelection)]="treeModelValue"
        [lvBeforeSelected]="lvTreeBeforeSelected"
        [lvSelectedValueMode]="lvSelectedValueMode"
        [lvNodeTemplate]="lvTreeNodeTemplate"
        [lvBlockNode]="lvBlockNode"
        [lvVirtualScroll]="lvVirtualScroll"
        [lvScroll]="lvScroll"
        [lvVirtualMaxBuffer]="lvVirtualMaxBuffer"
        [lvVirtualMinBuffer]="lvVirtualMinBuffer"
        (lvScrollEnd)="scrollEnd()"
        (lvScrollingChange)="scrollingChange($event)"
        [lvHighlightContent]="value"
        (lvExpandedChange)="expandedChange($event)"
        (lvSelectionChange)="selectionChange($event)"
        (lvCheck)="nodeCheck($event)"
        (lvRenderDataChange)="updateOverlayPosition()"
        (lvAnimationDone)="updateOverlayPosition()"
      ></lv-tree>
    </div>

    <!-- 数据为空 -->
    <div *ngIf="!lvTreeData?.length || noData" class="lv-treeselect-selection-null">
      <!-- 数据为空 -->
      <lv-empty (click)="stopPropagation($event)" [lvImage]="null"></lv-empty>
    </div>

    <!-- footer -->
    <div class="lv-treeselect-panel-footer" (click)="stopPropagation($event)">
      <ng-content select="lv-treeselect-footer"></ng-content>
    </div>
  </div>
</ng-template>
